import QtQuick 1.0
import "boris.js" as BorisGlobal

FocusScope {
    id: scope
    x: root.x; y: root.y
    width: root.width; height: root.height
    property alias color: root.color

    signal borisIndexChanged(int borisIndex)

    Rectangle {
        id: root
        width: parent.width
        height: parent.height
        opacity: 1

        signal clicked()

        Component {
            id: borisDetailDelegate
            Rectangle {
                width: borisDetailView.width; height: borisDetailView.height

                MouseArea {
                       anchors.fill: parent
                       onClicked: {
                           console.log("ye-ye");
                       }
                }

                Text {
                    anchors.top: parent.top
                    anchors.left: parent.left
                    text: BorisGlobal.toTwoLineString(name)
                    font.pointSize: 11
                    font.bold: true
                }

                Text {
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    text: BorisGlobal.formatDistance(model.modelData.distance)
                    font.pointSize: 14
                    font.bold: true
                }

                MyCompass {
                    id: compass
                    //anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                    width: Math.min(parent.height, parent.width)
                    height: Math.min(parent.height, parent.width)
                    bearing: model.modelData.bearing
                }

                Keys.onPressed: {
                    console.log("BorisDetailItem key pressed: " + event.key)
                }

            }
        }

        ListView {
            id: borisDetailView
            width: parent.width
            height: parent.height
            anchors.fill: parent
            delegate: borisDetailDelegate
            spacing: 1
            model: borisModel
            focus: true

            onCurrentIndexChanged : {
                console.log("BorisDetail index changed: " + currentIndex);
                scope.borisIndexChanged(currentIndex);
            }

            Keys.onPressed: {
                console.log("BorisDetail key pressed: " + event.key)
            }
        }

    }

    MouseArea { anchors.fill: parent; onClicked: { scope.focus = true } }

    Keys.forwardTo: [borisDetailView]

    onActiveFocusChanged: {
        console.log("BorisDetail focus changed. scope = " + activeFocus + "; list: " + borisDetailView.focus)
    }

}
